<template>
  <div>
    <ul>
      <li
        @click="detailFn(item)"
        v-for="(item, index) in goodsInfo"
        :key="index"
      >
        <img v-lazy="item.imgSrc" alt="" />
        <div class="desc">{{ item.title }}</div>
        <span class="newPrice">{{ item.curtPrice }}</span>
        <span class="oldPrice">{{ item.oldPrice }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["goodsInfo"],
  methods: {
    detailFn(item) {
      this.$router.push({ path: "/detail", query: item });
      console.log(item);
    },
  },
};
</script>

<style  lang="less" scoped>
ul {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 327px;
    background-color: #fff;
    text-align: left;
    margin: 10px 0;
    &:nth-of-type(even) {
      margin-left: 10px;
    }
    img {
      width: 100%;
    }
    .desc {
      font-size: 20px;
      margin-top: 8px;
      margin-left: 8px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .newPrice {
      display: inline-block;
      color: #cc3333;
      font-size: 28px;
      padding-top: 8px;
      margin-left: 8px;
    }
    .oldPrice {
      color: #999999;
      font-size: 20px;
      text-decoration: line-through;
      margin-left: 5px;
    }
  }
}
</style>